<template>
  <div id="app">
    <!-- 检查是否显示侧边栏 -->
    <div class="layout" :class="{ noSider: !showSider }">
      <div v-if="showSider" class="sider">
        <SidebarComponent />
      </div>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import SidebarComponent from './components/SidebarComponent'

export default {
  name: 'App',
  components: {
    SidebarComponent
  },
  data() {
    return {
      windowHeight: window.innerHeight, // 初始化窗口高度
      showSider: true // 是否显示侧边栏
    };
  },
  mounted() {
    // 动态设置侧边栏显示状态
    this.updateSiderVisibility(this.$route.path);

    // 监听窗口大小变化
    window.addEventListener("resize", this.updateHeight);
    // 监听路由变化
    this.$router.afterEach((to) => {
      this.updateSiderVisibility(to.path);
    });
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener("resize", this.updateHeight);
  },
  methods: {
    updateHeight() {
      this.windowHeight = window.innerHeight; // 更新窗口高度
    },
    updateSiderVisibility(path) {
      // 判断当前路由是否需要隐藏侧边栏
      const noSiderPaths = ['/Login']; // 定义不显示侧边栏的路径
      this.showSider = !noSiderPaths.includes(path);
    }
  }
};
</script>

<style>
/* 根容器设置为 100% 高度 */
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* layout 高度动态设置 */
.layout {
  display: flex;
  height: 100%; /* 设置为 100%，占满整个页面高度 */
}

.sider {
  width: 250px;
  height: 100%; /* 占满整个页面高度 */
  background-color: #FAFAFA;
}

.content {
  flex: 1; /* 自动填充剩余空间 */
  padding: 20px;
  overflow: auto;
  background-color: #FFF;
}

/* 当没有侧边栏时，调整布局 */
.noSider .content {
  margin-left: 0; /* 去掉侧边栏的空间 */
}
</style>
